<template>
  <div>
    <div class="container">
      <a-card class="left">

        <div class="material_reivew_top">
          <div class="material_reivew_top_left">新增送达记录</div>
          <div class="material_reivew_top_return">
            <page-header-wrapper :title="false"></page-header-wrapper>
            <img class="cursor_pointer" src="@/assets/images/accept/back-button.png" alt="返回按钮" @click="backRouter">
          </div>
        </div>

        <a-spin :spinning="loading">

          <a-form-model
            ref="arriveInfoAddRef"
            :rules="rules"
            title="送达记录新增"
            :model="infoForm"
            style="margin: 20px 20px"
          >
            <a-card>
              <div class="cardArea">
                <!-- 标题 -->
                <div class="cardArea_title">
                  <div class="cardArea_title_label"></div>
                  <div class="cardArea_title_content">送达信息</div>
                </div>
              </div>

              <a-divider />

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="案号" prop="acceptcode">
                  <div style="display: flex;justify-content: center;align-items: center;">
                    <a-select
                      show-search
                      :value="infoForm.acceptcode"
                      placeholder="请输入案号"
                      style="width: 70%"
                      :default-active-first-option="false"
                      :show-arrow="false"
                      :filter-option="false"
                      :not-found-content="null"
                      @search="fetchAcceptCode"
                      @change="acceptCodeChange"
                      @blur="blurCodeChage"
                    >
                      <a-select-option v-for="item in acceptCodeList" :key="item.acceptcode">
                        {{ item.acceptcode }}
                      </a-select-option>
                    </a-select>

                    <a-button :disabled="infoForm.acceptcode == '' || infoForm.acceptcode == undefined || infoForm.acceptcode == null" type="primary" style="margin-left: 20px" @click="onSearch"> 读取 </a-button>
                  </div>
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="送达人" prop="sender">
                  <span style="padding-left: 20px;"> {{ infoForm.sender ? infoForm.sender : '暂无数据' }} </span>
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="送达方式" prop="sendway">
                  <a-select allow-clear placeholder="请选择送达方式" v-model="infoForm.sendway" >
                    <a-select-option v-for="(item, id) in Tp_sendwayList" :value="item.value" :key="id">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="文书类型" prop="noticetype">
                  <div style="display: flex;justify-content: center;align-items: center;">
                    <a-input v-model="infoForm.noticetypeLabel" style="width: 70%" placeholder="请选择文书类型" disabled />
                    <a-button type="primary" style="margin-left: 20px" @click="onSelectDocument"> 选择 </a-button>
                  </div>
                </a-form-model-item>
              </a-col>

              <div style="clear:both"></div>
              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="送达时间" prop="arrivetime">
                  <a-date-picker
                    style="width: 100%"
                    v-model="infoForm.arrivetime"
                    placeholder="请选择送达时间"
                    valueFormat="yyyy-MM-DD"
                    :allowClear="true"
                  />
                </a-form-model-item>
              </a-col>

              <div class="cardArea">
                <!-- 标题 -->
                <div class="cardArea_title">
                  <div class="cardArea_title_label"></div>
                  <div class="cardArea_title_content">受送达人信息</div>
                </div>
              </div>

              <a-divider />
              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="受送达人" prop="recipientname">
                  <a-select
                    allow-clear
                    placeholder="请选择受送达人"
                    v-model="infoForm.recipientname"
                    @search="handleSearch"
                    @change="recipientChange"
                  >
                    <a-select-option v-for="(item, id) in recipientnameOption" :value="item.name" :key="id">
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="证件号/信用代码" prop="cardno">
                  <a-input v-model="infoForm.cardno" placeholder="请输入证件号/信用代码" />
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="邮寄地址" prop="addr">
                  <a-input v-model="infoForm.addr" placeholder="请输入邮寄地址" />
                </a-form-model-item>
              </a-col>

              <div class="cardArea">
                <!-- 标题 -->
                <div class="cardArea_title">
                  <div class="cardArea_title_label"></div>
                  <div class="cardArea_title_content">收件人信息</div>
                </div>
              </div>

              <a-divider />

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="收件人" prop="acceptname">
                  <a-input v-model="infoForm.acceptname" placeholder="请输入收件人" />
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="移动号码" prop="tel">
                  <a-input v-model="infoForm.tel" placeholder="请输入移动号码" />
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="电子邮件" prop="mail">
                  <a-input v-model="infoForm.mail" placeholder="请输入电子邮件" />
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="邮政编码" prop="postcode">
                  <a-input v-model="infoForm.postcode" placeholder="请输入邮政编码" />
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="其他联系方式" prop="contactway">
                  <a-input v-model="infoForm.contactway" placeholder="请输入其他联系方式" />
                </a-form-model-item>
              </a-col>

              <a-col :xxl="12" :lg="12" :sm="24">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="邮寄单号" prop="expresscode">
                  <a-input v-model="infoForm.expresscode" placeholder="邮寄单号" />
                </a-form-model-item>
              </a-col>

              <a-col :xxl="24" :lg="24" :sm="24">
                <a-form-model-item :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }" label="邮寄进度" prop="expressphoto">
                  <a-upload
                    style="padding-left:20px"
                    list-type="picture-card"
                    :file-list="photoFileList"
                    @preview="photoPreview"
                    :customRequest="(file) => uploadFile(file)"
                    :before-upload="(file) => beforeUpload(file)"
                    :remove="(file) => minioRemove(file)"
                  >
                    <div v-if="photoFileList.length < 5">
                      <a-icon type="plus" />
                      <div class="ant-upload-text">
                        上传快递图片
                      </div>
                    </div>
                  </a-upload>
                  <a-modal :visible="previewVisible" :footer="null" @cancel="photoCancel">
                    <img alt="photo" style="width: 100%" :src="previewImage" />
                  </a-modal>

                </a-form-model-item>
              </a-col>

            </a-card>

            <a-col :xxl="24" :lg="24" :sm="24">
              <a-form-model-item style="text-align: center;margin-top:10px">
                <a-button @click="backRouter"> 返回 </a-button>
                <a-button @click="resetForm" style="margin-left: 15px"> 重置 </a-button>
                <a-button type="primary" style="margin-left: 15px" @click="filePreview"> 预览文书 </a-button>
                <a-button type="primary" style="margin-left: 15px" :loading="btnloading" @click="onSubmit"> 送达 </a-button>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-spin>
      </a-card>

      <div class="right">
        <div class="recording-container">
          <div class="recording-container-title-div">
            <div class="recording-container-span-label">送达记录</div>
          </div>
          <div class="recording-container-table-div">
            <a-table
              :scroll="{ y: 800 }"
              :columns="columns"
              :data-source="arriveList"
              rowKey="id"
              :pagination="false"
              :loading="loading"
              :showHeader="true"
            >
              <div slot="noticetypeSlot" slot-scope="noticetype" class="beyond_hiding" style="width: 100%">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ noticeTypeLabel(noticetype) }}</span>
                  </template>
                  {{ noticeTypeLabel(noticetype) }}
                </a-tooltip>
              </div>

              <div slot="filenameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ (record.file && record.file.filename) ? record.file.filename: '' }}</span>
                  </template>
                  {{ (record.file && record.file.filename) ? record.file.filename: '' }}
                </a-tooltip>
              </div>

              <div slot="senderSlot" slot-scope="sender" class="beyond_hiding" style="width: 100%">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ sender }}</span>
                  </template>
                  {{ sender }}
                </a-tooltip>
              </div>

              <div slot="recipientnameSlot" slot-scope="recipientname" class="beyond_hiding" style="width: 100%">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ recipientname }}</span>
                  </template>
                  {{ recipientname }}
                </a-tooltip>
              </div>

              <div slot="sendwaySlot" slot-scope="sendway" class="beyond_hiding" style="width: 100%">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ sendWayLabel(sendway) }}</span>
                  </template>
                  {{ sendWayLabel(sendway) }}
                </a-tooltip>
              </div>

            </a-table>
          </div>
        </div>

      </div>
    </div>

    <ArriveDocument
      ref="arriveDocument"
      @setFileInfo="setFileInfo"
      :acceptcode="infoForm.acceptcode"
      :checkId="infoForm.noticecode"
    ></ArriveDocument>
  </div>
</template>
<script>
import storage from 'store'
import { APP_USER, APP_DEPT } from '@/store/mutation-types'
import { Tp_sendwayList } from '@/enumeration/Tp_sendway'
// import { getReviewDetailByCode, saveArriveData, getAdmireByCode, getArriveRecordByApplyid } from '@/api/arrive/apl_arrive_record'
import { kkfilePreview } from '@/utils/util.js'
import { Tp_procmaterial, Tp_procmaterialList } from '@/enumeration/Tp_procmaterial'
import { Tp_applicantValue } from '@/enumeration/Tp_applicant'
import { minioUpload, minioRemove } from '@/api/base/file'
// import { getByidNotice } from '@/api/home/apl_arrive_notice.js'
export default {
  data () {
    return {
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 14 }, // 组件宽
      loading: false, // 页面加载
      modalVisible: false, // 模态框显示
      infoForm: {
        recorduserid: '', // 记录人
        recordusername: '', // 记录人
        recordtime: '', // 记录时间
        applyid: '', // 受理id
        acceptcode: '', // 案号
        sender: '', // 送达人
        senderid: '', // 送达人id
        sendway: undefined, // 送达方式
        noticetype: undefined, // 文书类型
        noticetypeLabel: undefined, // 文书类型文本
        noticecode: undefined, // 文书编码。
        arrivetime: undefined, // 送达时间
        recipientname: undefined, // 受送达人
        recipientid: undefined, // 受送达人id
        cardno: '', // 身份证号
        addr: '', // 邮寄地址
        acceptname: '', // 收件人
        tel: '', // 移动号码
        mail: '', // 电子邮件
        postcode: '', // 邮政编码
        contactway: '', // 其他联系方式
        expresscode: undefined, // 邮寄单号
        expressphoto: undefined // 邮寄进度

      },
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      rules: {
        acceptcode: [{ required: true, message: '请输入案号', trigger: 'blur' }],
        sender: [{ required: true, message: '请输入送达人', trigger: 'blur' }],
        sendway: [{ required: true, message: '请选择送达方式', trigger: 'change' }],
        noticetype: [{ required: true, message: '请选择文书类型', trigger: 'blur' }],
        arrivetime: [{ required: true, message: '请选择送达时间', trigger: 'change' }],
        recipientname: [{ required: true, message: '请选择受送达人', trigger: 'change' }],
        cardno: [{ validator: this.checkCardno }],
        tel: [{ validator: this.checkTel }],
        postcode: [{ validator: this.checkPostcode }],
        mail: [{ validator: this.checkMail }]
      },
      cardNoValid: true,
      Tp_sendwayList: Tp_sendwayList,
      // 送达方式
      // 送达人
      arriveInfo: {},
      // 受送达人option
      recipientnameOption: [],
      // 主表信息：
      admreview: {},
      // 被申请人信息：
      targetList: [],
      // 申请人信息
      applicantList: [],
      // 被申请人信息
      thirdList: [],
      selectFile: undefined,
      btnloading: false, // 按钮加载
      fetching: false, // 搜索加载
      acceptCodeList: [], // 符合案号的list
      Tp_procmaterialList: Tp_procmaterialList, // 材料类型-过程材料
      noticeTypeList: Tp_procmaterialList,

      // 相同案号的记录
      columns: [
        {
          title: '文书类型',
          key: 'noticetype',
          dataIndex: 'noticetype',
          width: '80px',
          scopedSlots: { customRender: 'noticetypeSlot' }
        },
        {
          title: '文书名称',
          key: 'filename',
          dataIndex: 'filename',
          width: '80px',
          scopedSlots: { customRender: 'filenameSlot' }
        },
        {
          title: '送达方式',
          key: 'sendway',
          dataIndex: 'sendway',
          width: '80px',
          scopedSlots: { customRender: 'sendwaySlot' }
        },
        {
          title: '受送达人',
          key: 'recipientname',
          dataIndex: 'recipientname',
          width: '80px',
          scopedSlots: { customRender: 'recipientnameSlot' }
        },
        {
          title: '收件人',
          key: 'sender',
          dataIndex: 'sender',
          width: '80px',
          scopedSlots: { customRender: 'senderSlot' }
        }
      ],
      arriveList: [],
      photoFileList: [], // 照片list
      previewVisible: false,
      previewImage: ''
    }
  },
  created () {
    this.isNotice()
    this.init()
  },
  mounted () {
    document.addEventListener('keydown', this.handleWatchEnter)
  },
  components: {
    ArriveDocument: () => import('@/views/arrive/ArriveDocument.vue')
  },
  methods: {
    async isNotice () {
      const noticeid = this.$route.params.noticeid
      if (noticeid != 'new') {
        // const { data } = await getByidNotice(noticeid)
        // if (data && data.code) {
        //   this.infoForm.acceptcode = data.code
        //   this.onSearch()
        // }
      }
    },
    init () {
      this.resetForm()
      this.modalVisible = true
      this.infoForm.recorduserid = this.currentUser.userId // 记录人
      this.infoForm.recordusername = this.currentUser.fullname // 记录人
    },
    // 键盘回车事件
    handleWatchEnter (e) {
      const key = window.event ? e.keyCode : e.which
      if (key === 13) {
        this.onSearch()
      }
    },
    checkCardno (rule, value, callback) {
      if (!this.cardNoValid) {
        callback()
      }
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error('请输入正确的身份证号'))
      }
      callback()
    },
    checkTel (rule, value, callback) {
      if (value && !/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/.test(value)) {
        callback(new Error('请输入正确的电话号码'))
      }
      callback()
    },
    checkPostcode (rule, value, callback) {
      if (value && !/^[0-9]{6}$/.test(value)) {
        callback(new Error('请输入正确的邮政编码'))
      }
      callback()
    },
    checkMail (rule, value, callback) {
      if (
        value &&
        !/^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/.test(
          value
        )
      ) {
        callback(new Error('请输入正确的电子邮箱'))
      }
      callback()
    },
    handleCancel () {
      this.resetForm()
      this.modalVisible = false
    },
    resetForm () {
      this.$nextTick(() => {
        this.$refs.arriveInfoAddRef.resetFields()
      })
    },
    resetSerchInfo () {
      this.infoForm.applyid = '' // 受理id
      this.infoForm.noticetype = undefined // 文书类型
      this.infoForm.noticetypeLabel = undefined // 文书类型文本
      this.infoForm.noticecode = undefined// 文书编码。
      this.infoForm.recipientname = undefined // 受送达人
      this.infoForm.recipientid = '' // 受送达人
      this.infoForm.cardno = '' // 身份证号
      this.infoForm.addr = '' // 邮寄地址
      this.infoForm.acceptname = '' // 收件人
      this.infoForm.tel = '' // 移动号码
      this.infoForm.mail = '' // 电子邮件
      this.infoForm.postcode = '' // 邮政编码
      this.infoForm.contactway = '' // 其他联系方式
      this.infoForm.sender = '' // 送达人
      this.infoForm.senderid = '' // 送达人id
      this.infoForm.expresscode = undefined // 邮寄单号
      this.infoForm.expressphoto = undefined // 邮寄进度
      // 送达人
      this.arriveInfo = {}
      // 文书类型option
      // this.noticetypeOption = []
      // 受送达人option
      this.recipientnameOption = []
      // 主表信息：
      this.admreview = {}
      // 被申请人信息：
      this.targetList = []
      // 申请人信息
      this.applicantList = []
      // 被申请人信息
      this.thirdList = []
      // 文书信息：
      // this.documentList = []
    },
    recipientChange (val) {
      // 通过对应的值来设置身份证等默认值
      const selectPerson = this.recipientnameOption.filter((item) => item.name == val)[0]
      if (selectPerson) {
        if (selectPerson.personType == 'applicant') {
          this.infoForm.cardno = selectPerson.cardno
          this.infoForm.addr = selectPerson.addr
          this.infoForm.acceptname = selectPerson.name
          this.infoForm.tel = selectPerson.tel
          this.infoForm.postcode = selectPerson.postcode
          this.cardNoValid = selectPerson.type == Tp_applicantValue.CITIZEN
          this.infoForm.recipientid = selectPerson.id
        } else if (selectPerson.personType == 'target') {
          this.infoForm.cardno = ''
          this.infoForm.addr = ''
          this.infoForm.acceptname = ''
          this.infoForm.tel = ''
          this.infoForm.postcode = ''
          this.infoForm.recipientid = selectPerson.id
        } else if (selectPerson.personType == 'third') {
          this.infoForm.cardno = selectPerson.cardno
          this.infoForm.addr = selectPerson.addr
          this.infoForm.acceptname = selectPerson.name
          this.infoForm.tel = selectPerson.tel
          this.infoForm.postcode = selectPerson.postcode
          this.cardNoValid = selectPerson.type == Tp_applicantValue.CITIZEN
          this.infoForm.recipientid = selectPerson.id
        }
        if (selectPerson.id == this.arriveInfo.name) { // 若当前的id和送达记录里的一致，可以带出邮箱和其他联系方式
          this.infoForm.mail = this.arriveInfo.email // 电子邮件
          this.infoForm.contactway = this.arriveInfo.other // 其他联系方式
        }
      }
    },
    handleSearch (value) {
      fetch(value, (data) => (this.data = data))
    },
    backRouter () {
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
              tabkey: this.$route.query.tabkey
            }
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam
            }
          })
        }
      } else {
        this.$router.go(-1)
      }
    },
    onSelectDocument () {
      this.$refs.arriveDocument.init()
    },
    // 通过案号模糊查询
    fetchAcceptCode (val) {
      this.fetching = true
      this.acceptCodeList = []
      this.infoForm.acceptcode = val
      // getAdmireByCode({ acceptcode: this.trimLine(this.infoForm.acceptcode) }).then((res) => {
      //   this.fetching = false
      //   if (res.code == 0) {
      //     this.acceptCodeList = res.data
      //   } else {
      //     this.$message.error('未读取到数据，请核对案号是否正确')
      //   }
      // })
    },
    // 选择案号
    acceptCodeChange (val) {
      console.log('输入修改', val)
      this.infoForm.acceptcode = val
    },
    blurCodeChage (val) {
      console.log('输入修改', val)
      this.infoForm.acceptcode = val
    },
    onSearch () {
      this.resetSerchInfo()
      this.loading = true
      // getReviewDetailByCode({ acceptcode: this.trimLine(this.infoForm.acceptcode) }).then((res) => {
      //   this.loading = false
      //   if (res.code == 0) {
      //     const resObj = res.data
      //     if (resObj != null && resObj != undefined) {
      //       this.$message.success('查询成功')
      //       // 主表信息：
      //       this.admreview = resObj.admreview
      //       // 重新设置案号
      //       this.infoForm.acceptcode = this.admreview.acceptcode ? this.admreview.acceptcode : this.infoForm.acceptcode
      //       if (this.admreview != null && this.admreview != undefined) {
      //         this.infoForm.applyid = this.admreview.id
      //       }
      //       // 被申请人信息：
      //       this.targetList = resObj.targetList
      //       // 申请人信息
      //       this.applicantList = resObj.applicantList
      //       // 第三人信息
      //       this.thirdList = resObj.thirdList
      //       // 送达信息
      //       this.arriveInfo = resObj.arriveInfo

      //       if (this.applicantList) {
      //         this.applicantList.forEach((item) => {
      //           item.label = '申请人-' + item.name
      //           item.personType = 'applicant'
      //           this.recipientnameOption.push(item)
      //         })
      //       }
      //       if (this.targetList) {
      //         this.targetList.forEach((item) => {
      //           item.label = '被申请人-' + item.name
      //           item.personType = 'target'
      //           this.recipientnameOption.push(item)
      //         })
      //       }
      //       if (this.thirdList) {
      //         this.thirdList.forEach((item) => {
      //           item.label = '第三人-' + item.name
      //           item.personType = 'third'
      //           this.recipientnameOption.push(item)
      //         })
      //       }

      //       if (this.arriveInfo) { // 如果有申请人信息，默认带出
      //         this.arriveInfo.label = this.arriveInfo.recipient
      //         this.infoForm.sender = this.arriveInfo.label
      //         this.infoForm.senderid = this.arriveInfo.id
      //       }
      //       // 查询相同的applyid的记录
      //       getArriveRecordByApplyid({ applyid: this.trimLine(this.admreview.id) }).then((res) => {
      //         if (res.code == 0) {
      //           this.arriveList = res.data
      //         } else {
      //           this.$message.error('查询失败')
      //         }
      //       })
      //     } else {
      //       this.$message.error('未读取到数据，请核对案号是否正确')
      //     }
      //   } else {
      //     this.$message.error('未读取到数据，请核对案号是否正确')
      //   }
      // })
    },

    filter (inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    filePreview () {
      if (this.selectFile) {
        console.log('文件预览', this.selectFile)
        window.open(kkfilePreview(this.selectFile.document.file.path))
      } else {
        this.$message.warn('未选择文书类型')
      }
    },
    trimLine (str) {
      return str ? str.replace(/(^\s*)|(\s*$)/g, '') : ''
    },
    /**
     * 提交表单
     */
    onSubmit () {
      const _this = this
      this.$confirm({
        title: '确定送达吗？',
        onOk: () => {
          this.$refs.arriveInfoAddRef.validate((valid) => {
            _this.btnloading = true
            if (valid) {
              const copyForm = JSON.parse(JSON.stringify(this.infoForm))
              if (copyForm.acceptcode) {
                copyForm.acceptcode = this.trimLine(copyForm.acceptcode.toString())
              }
              if (copyForm.sender) {
                copyForm.sender = this.trimLine(copyForm.sender.toString())
              }
              if (copyForm.cardno) {
                copyForm.cardno = this.trimLine(copyForm.cardno.toString())
              }
              if (copyForm.tel) {
                copyForm.tel = this.trimLine(copyForm.tel.toString())
              }
              if (copyForm.mail) {
                copyForm.mail = this.trimLine(copyForm.mail.toString())
              }
              if (copyForm.postcode) {
                copyForm.postcode = this.trimLine(copyForm.postcode.toString())
              }
              if (copyForm.contactway) {
                copyForm.contactway = this.trimLine(copyForm.contactway.toString())
              }
              // 文件uid进行拼接
              if (this.photoFileList && this.photoFileList.length > 0) {
                const urlList = []
                this.photoFileList.forEach(file => {
                  urlList.push(file.url)
                })
                copyForm.expressphoto = urlList.join(',')
              } else {
                copyForm.expressphoto = undefined
              }

              console.log('入参参数：' + copyForm)
              // saveArriveData(copyForm).then((res) => {
              //   if (res.code !== 0) {
              //     _this.$message.error('送达失败')
              //   } else {
              //     _this.$message.success('送达成功')
              //     _this.$emit('reload')
              //     _this.$emit('close')
              //     _this.modalVisible = false
              //     _this.backRouter()
              //   }
              //   _this.btnloading = false
              // })
            } else {
              _this.btnloading = false
              // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
              // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
              setTimeout(() => {
                const isError = document.getElementsByClassName('has-error')
                const input = isError[0].querySelector('input')
                // console.log(input)
                if (input !== null && input !== 'undefind' && input !== '') {
                  isError[0].querySelector('input').focus()
                    ? isError[0].querySelector('input').focus()
                    : isError[0].querySelector('input').click()
                } else {
                  isError[0].querySelector('textarea').focus()
                }
              }, 10)
              return false
            }
          })
        }
      })
    },
    setFileInfo (info) {
      this.selectFile = info
      this.infoForm.noticetype = info.document.mattype // 文书类型
      this.infoForm.noticetypeLabel = Tp_procmaterial[info.document.mattype].name
      this.infoForm.noticecode = info.document.attachid // 文书编码。
      this.$refs.arriveInfoAddRef.validate()
    },

    /**
     * 材料类型显示转换
     */
     noticeTypeLabel (val) {
      for (const key in this.noticeTypeList) {
        if (this.noticeTypeList[key].value == val) {
          return this.noticeTypeList[key].name
        }
      }
      return val
    },
    /**
     * 发送方式显示转换
     * @param {*} val
     */
    sendWayLabel (val) {
      for (const key in this.Tp_sendwayList) {
        if (this.Tp_sendwayList[key].value == val) {
          return this.Tp_sendwayList[key].name
        }
      }
      return val
    },

    /**
     * 上传导入文件前验证文件类型
     */
     beforeUpload (file) {
      return new Promise((resolve, reject) => {
        // 文件格式是否为xls,xlsx
        const isAcceptType = file.name.toLowerCase().substr(file.name.lastIndexOf('.'))
        const acceptType = '.jpg,.jpeg,.png,.JPG,.JPEG,.PNG'
        if (!(acceptType.indexOf(isAcceptType) > -1)) {
          this.$message.warning('请上传' + acceptType + '格式文件')
          return reject(false)
        }
        // 文件小于10M
        const isLtSize = file.size / 1024 / 1024 < 10
        if (!isLtSize) {
          this.$message.warning('请上传10MB以内的文件')
          return reject(false)
        }
        return resolve(false)
      })
    },
    /**
     * 上传附件,没有用到附件请删除
     */
    uploadFile (data) {
      console.log(data)
      minioUpload(data.file).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          this.$message.error('上传图片失败')
        } else {
          this.$message.success('上传图片成功')
          const url = res.data.url
          const file = {
            uid: res.data.id,
            name: res.data.filename,
            status: 'done',
            url: res.data.url,
            flag: data.file.uid
          }
          this.photoFileList.push(file)
          // this.infoForm.avatar = url
        }
      })
    },
    photoCancel () {
      this.previewVisible = false
    },
    photoPreview (file) {
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    minioRemove (file) {
      minioRemove({ 'fileid': file.uid }).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          console.log('删除文件失败', res)
        } else {
          this.photoFileList = this.photoFileList.filter(el => el.uid !== file.uid)
          console.log('删除文件成功')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

  .cardArea {
    background-color: #ffffff;
    // padding: 28px;
  }

  .cardArea_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .cardArea_title_label {
    width: 3px;
    height: 17px;
    background-color: #5b79fb;
  }

  .cardArea_title_content {
    margin-left: 0.5%;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 550;
    color: #232323;
    letter-spacing: 2px;
  }

  .container {
    display: flex;
  }
  .left, .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    // padding: 10px;
    margin: 10px;
  }
  .left {
    width: 65%;
  }
  .right {
    width: 35%;
  }

  ::v-deep .ant-card-body {
    padding: 12px;
  }

  .recording-container-title-div {
    justify-content: flex-start;
    margin-left: 10px;
  }
  .recording-container-span-label {
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #2C2C2C;
  }

::v-deep .ant-pro-grid-content {
  margin-top: 10px;
}

.material_reivew {
  background: #f8fafd;

  &_top {
    display: flex;
    flex-direction: row;
    align-items: center;

    &_left {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #2c2c2c;
      padding-left: 16px;
    }

    &_right {
      display: flex;
      align-items: center;
      margin-left: 109px;

      &_img {
        height: 24px;
        width: 24px;
      }

      &_text {
        margin-left: 10px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 800;
        text-decoration: underline;
        color: #0072c6;
      }
    }

    &_return {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;
    }
  }
}

</style>
